import React, { useEffect, useState } from 'react'

import { Table, message, Skeleton, Switch } from 'antd';

import styles from './index.module.css'


//网络请求
import { pushLog, queryValveState, setValveState } from '../../../utils/axiosRequest/api'
//持久化
import { setCache, getCache } from '../../../utils/cache/'
//列
import { columns } from '../../../constant/pushColumn'


function PushState() {
    //消息提示
    const [messageApi, contextHolder] = message.useMessage();
    //加载状态
    const [isLoad, setLoad] = useState(false);
    //表格展示数据
    const [showDataSource, setShowDataSource] = useState([]);
    //表格总数量
    const [total, setTotal] = useState(0);
    //开关状态
    const [checked, setChecked] = useState(false);

    //[]空数组相当于componentDidMount
    useEffect(() => {
        //默认加载第一页
        initData(1);
        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);

    function initData(pageIndex) {
        setLoad(true)
        const params = new Map()
        params.set('pageIndex', pageIndex)
        pushLog(params)
            .then(response => {
                setLoad(false)
                const data = response.data
                if (data.code === 1000) {
                    handleData(data)
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                setLoad(false)
                messageApi.open({ type: 'error', content: error.message });
            });
        //查询开关状态
        const valveParams = new Map()
        queryValveState(valveParams)
            .then(response => {
                const data = response.data
                if (data.code === 1000) {
                    const state = data.data
                    if (state === "0") {
                        setChecked(true)
                    } else {
                        setChecked(false)
                    }
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                messageApi.open({ type: 'error', content: error.message });
            });
    }

    function handleData(data) {
        const pushLogList = data.data.pushLogList;
        setTotal(data.data.total);
        const length = pushLogList.length;
        const tempData = [];
        for (let i = 0; i < length; i++) {
            tempData.push({
                key: i,
                eventCode: pushLogList[i].eventCode,
                responseState: pushLogList[i].responseState,
                pushState: pushLogList[i].pushState,
                pushTime: pushLogList[i].pushTime,
            })
        }
        //保存全量案件数据
        setShowDataSource(tempData)
    }

    function handleTableChange(pagination, filters, sorter) {
        initData(pagination.current);
    }

    function onClickSwitch(checked) {
        const valveParams = new Map()
        valveParams.set("switchState", checked ? "0" : "1")
        setValveState(valveParams)
            .then(response => {
                const data = response.data
                if (data.code === 1000) {
                    setChecked(checked)
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                messageApi.open({ type: 'error', content: error.message });
            });
    }

    return (
        <div>
            <div className={styles.container}>
                {contextHolder}
                <Table title={() => {
                    return (
                        <div className={styles.header} >
                            <Switch  onClick={onClickSwitch} checkedChildren="推送开启" unCheckedChildren="推送关闭" defaultChecked={false} checked={checked} />
                        </div>
                    )
                }} size={'middle'}
                    loading={isLoad} pagination={{ showSizeChanger: false, pageSize: '20', position: ['bottomCenter'], defaultCurrent: '1', total: total }}
                    onChange={handleTableChange} bordered={true} dataSource={showDataSource} columns={columns} scroll={{ y: 470, }} />;

            </div>
        </div>
    )
}

export default PushState;
